<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AtomGit 开源项目生命周期</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <style>
        :root {
            --apple-gray: #f5f5f7;
            --apple-text: #1d1d1f;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell;
            background-color: var(--apple-gray);
            color: var(--apple-text);
        }

        .hero-section {
            background: linear-gradient(180deg, #000 0%, #2b2b2b 100%);
            color: white;
            padding: 120px 0;
            text-align: center;
        }

        .hero-title {
            font-size: 56px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .hero-subtitle {
            font-size: 28px;
            font-weight: 400;
            margin-bottom: 40px;
        }

        .section {
            padding: 80px 0;
            background: white;
            margin: 20px 0;
            border-radius: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .section-title {
            font-size: 40px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 40px;
        }

        .role-card {
            background: var(--apple-gray);
            border-radius: 18px;
            padding: 30px;
            margin-bottom: 30px;
            transition: transform 0.3s ease;
        }

        .role-card:hover {
            transform: scale(1.02);
        }

        .role-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
            color: var(--apple-text);
        }

        .action-list {
            list-style: none;
            padding: 0;
        }

        .action-list li {
            margin-bottom: 10px;
            padding: 10px;
            background: white;
            border-radius: 8px;
        }

        .mermaid {
            background: white;
            padding: 20px;
            border-radius: 18px;
        }

        .nav-pills .nav-link {
            border-radius: 20px;
            padding: 10px 20px;
            margin: 5px;
            color: var(--apple-text);
        }

        .nav-pills .nav-link.active {
            background-color: var(--apple-text);
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container">
            <h1 class="hero-title">AtomGit 开源项目生命周期</h1>
            <p class="hero-subtitle">探索开源项目的完整旅程</p>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container my-5">
        <!-- Roles Section -->
        <section class="section">
            <h2 class="section-title">核心角色</h2>
            <div class="row">
                <!-- User Role -->
                <div class="col-md-4">
                    <div class="role-card">
                        <h3 class="role-title">使用者</h3>
                        <ul class="action-list">
                            <li>浏览项目代码</li>
                            <li>克隆仓库</li>
                            <li>下载代码</li>
                            <li>提交Issue</li>
                            <li>关注项目更新</li>
                        </ul>
                    </div>
                </div>

                <!-- Contributor Role -->
                <div class="col-md-4">
                    <div class="role-card">
                        <h3 class="role-title">贡献者</h3>
                        <ul class="action-list">
                            <li>Fork项目</li>
                            <li>本地开发</li>
                            <li>提交Pull Request</li>
                            <li>参与代码审查</li>
                            <li>持续改进</li>
                        </ul>
                    </div>
                </div>

                <!-- Maintainer Role -->
                <div class="col-md-4">
                    <div class="role-card">
                        <h3 class="role-title">维护者</h3>
                        <ul class="action-list">
                            <li>创建管理项目</li>
                            <li>审核Pull Request</li>
                            <li>管理项目分支</li>
                            <li>发布项目版本</li>
                            <li>维护项目文档</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- Workflow Section -->
        <section class="section">
            <h2 class="section-title">工作流程图</h2>
            <div class="mermaid">
graph TB
    subgraph 用户注册
        A[AtomGit平台注册/登录] --> B[选择角色]
        B --> C[使用者]
        B --> D[贡献者]
        B --> E[维护者]
    end

    subgraph 项目生命周期
        F[创建项目] --> G[代码开发]
        G --> H[版本控制]
        H --> I[社区互动]
        I --> J[持续维护]
    end

    subgraph Git操作
        K[git clone]
        L[git push]
        M[git pull]
        N[git merge]
        O[git branch]
    end

    style A fill:#000,color:#fff
    style F fill:#000,color:#fff
    style K fill:#f5f5f7
            </div>
        </section>

        <!-- Git Operations Section -->
        <section class="section">
            <h2 class="section-title">Git 核心操作</h2>
            <ul class="nav nav-pills mb-4 justify-content-center" id="gitTabs">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="pill" href="#clone">Clone</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="pill" href="#push">Push</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="pill" href="#pull">Pull</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="pill" href="#merge">Merge</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade show active" id="clone">
                    <div class="role-card">
                        <pre><code>git clone https://atomgit.com/username/repo.git</code></pre>
                        <p class="mt-3">克隆远程仓库到本地工作目录</p>
                    </div>
                </div>
                <div class="tab-pane fade" id="push">
                    <div class="role-card">
                        <pre><code>git push origin main</code></pre>
                        <p class="mt-3">推送本地更改到远程仓库</p>
                    </div>
                </div>
                <div class="tab-pane fade" id="pull">
                    <div class="role-card">
                        <pre><code>git pull origin main</code></pre>
                        <p class="mt-3">拉取远程更新到本地仓库</p>
                    </div>
                </div>
                <div class="tab-pane fade" id="merge">
                    <div class="role-card">
                        <pre><code>git merge feature-branch</code></pre>
                        <p class="mt-3">合并分支更改</p>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>